import React, { Component } from 'react';
import {
    View,
    Text,
    TextInput,
    Button,
    StyleSheet,
    ScrollView,
    Image,
    TouchableOpacity,
    ImageBackground,
    ToastAndroid,
    DeviceEventEmitter,
} from 'react-native';
import * as ImagePicker from 'react-native-image-picker';
import Icon from 'react-native-vector-icons/AntDesign';
import Loading from '../../compenent/Loading';
import {DOMAIN_URL, addEvent, eventUpdate, uploadFile, honorDetail} from '../../../util/api';
import { DateTimePickerAndroid } from '@react-native-community/datetimepicker';
import moment, { months } from 'moment';
import { PAGENAME } from '../../../util/PageName';
import { style } from '../../../theme';
import DeleteIcon from "../../compenent/DeleteIcon";
import AsyncStorage from "@react-native-async-storage/async-storage";

class HonorDetailScreen extends Component {
    constructor(props) {
        super(props);
        this.state = {
            honorid: props.route.params.honorid,
            name: '',
            description: '',
            score: '',
            images: [],
            preImages: [],
            // 'descriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescription',
            // score: '2',
            // images: [],
            // endTime: new Date(),
            loading: false,
            approvalStatus: '',
            isAdmin: false,
        };

        AsyncStorage.getItem('isAdmin').then(value => {
            console.log('this.state.isAdmin', value);
            this.setState({
                isAdmin: value == 'true' ? true : false,
            });
        });
    }

    componentDidMount() {
        this.subscription = this.props.navigation.addListener('focus', () => {
            // do something
            console.log('event detail');
            this.loadDataDetail()
        });
    }

    private loadDataDetail() {
        honorDetail(this.state.honorid).then(res => {
            console.log(1111111111111111)
            console.log(res.data);
            const data = res.data;
            this.setState({
                name: data.honorTitle,
                description: data.honorcontent,
                score: data.honorscore,
                preImages: data.attachmentsDetail,
                approvalStatus: data.approvalStatus
            })
        })

    }

    componentWillUnmount() {
        this.subscription();
    }

    pickImage = () => {
        ImagePicker.launchImageLibrary(
            { mediaType: 'photo', selectionLimit: 5 },
            response => {
                if (!response.didCancel) {
                    this.setState(prevState => ({
                        images: [
                            ...new Set([
                                ...prevState.images,
                                ...(response.assets.map(asset => asset) || []),
                            ]),
                        ],
                    }));
                }
            },
        );
    };

    inputEndTime = (event, value) => {
        this.setState({ endTime: value });
    };

    render() {
        console.log(this.state);
        const { name, description, score, images, preImages, approvalStatus } = this.state;
        return (
            // <ImageBackground
            //   source={require('../../../assets/images/bg.jpg')} // 替换为您自己的背景图路径
            //   style={{flex: 1}}
            //   imageStyle={{opacity: 0.4}} // 修改透明度，范围为0（完全透明）到1（完全不透明）
            // >
            <View>
                <Loading loading={this.state.loading} />
                <ScrollView contentContainerStyle={styles.container}>
                    <Text style={style.subTitle}>标题</Text>
                    <TextInput editable={false}
                        style={styles.input}
                        value={name}
                        onChangeText={text => this.setState({ name: text })}
                    />
                    <Text style={style.subTitle}>分数</Text>
                    <TextInput editable={false}
                        style={styles.input}
                        value={score + ''}
                        onChangeText={text => this.setState({ score: text })}
                    />

                    <Text style={style.subTitle}>描述内容</Text>
                    <TextInput editable={false}
                        style={[styles.input]}
                        value={description}
                        onChangeText={text => this.setState({ description: text })}
                        multiline
                    />
                    <View style={{ flexDirection: 'row' }}>
                        <Text style={style.subTitle}>图片</Text>
                    </View>
                    <View style={{ flexDirection: 'row', flexWrap: 'wrap' }}>
                        {preImages?.map((image, index) => (
                            <View key={index} style={{ position: 'relative', margin: 4 }}>
                                <Image source={{ uri: `${DOMAIN_URL}${image.path}` }} style={styles.image} />
                            </View>
                        ))}

                    </View>
                    {approvalStatus === '1' && (
                        <View
                            style={{
                                flexDirection: 'row',
                                alignSelf: 'center',
                                marginVertical: 15,
                            }}>

                            {this.state.isAdmin && (
                                <View style={style.pageButton}>
                                    <View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
                                        <Button title="审批通过" onPress={() => this.reviewApply('0')} />
                                        <Button title="不通过" onPress={() => this.reviewApply('2')} />
                                    </View>
                                </View>
                            )}

                        </View>
                    )}

                    {approvalStatus !== '1' && (
                        <View>
                            <Button
                                disabled={true}
                                title={
                                    approvalStatus === '0'
                                        ? '已通过'
                                        : approvalStatus ===
                                        '2'
                                            ? '未通过'
                                            : '其他'
                                }
                            />
                        </View>
                    )}

                </ScrollView>
                {/* </ImageBackground> */}
            </View>

        );
    }


}

const styles = StyleSheet.create({
    container: {
        padding: 20,
    },
    label: {
        fontSize: 16,
        marginBottom: 5,
        fontWeight: 'bold',
    },
    input: {
        borderWidth: 1,
        borderColor: 'gray',
        borderRadius: 5,
        marginBottom: 10,
        padding: 10,
    },
    button: {
        fontSize: 16,
        color: 'blue',
        marginBottom: 10,
    },
    image: {
        width: 75,
        height: 75,
        marginBottom: 10,
    },
});

export default HonorDetailScreen;
